<extend name="Public/base"/>

<block name="body">
	<script type="text/javascript" src="__JS__/jquery.nicescroll.js"></script>
	<style type="text/css">
	.choosed{
		height: 83%;
	}
	
	.not-choosed{
		
		height: 83%;
	}
	.fl{
		float: left;
		margin:0 10px;
	}
	.well{
		background: #fff;
	}
	</style>
    <div class="main-title">
        <h2>分配学生【{$classList.class_sno|substr=4} 班】</h2>
    </div>

<div style="height:450px">
<label class="item-label fl" >当前班级学生</label>
	<div class="choosed well center-block col-md-3">
		<form action="" class="choosed-form">
		<volist name="_list" id="vo">
			<input class="btn btn-info btn-block"  type="button" name="id" value="{$vo.sno|substr=4}-{$vo.username}" data-id="{$vo.id}" />
			</volist>
		</form>
	</div>
	<label class="item-label fl" >未分配学生</label>
	<div class="not-choosed well center-block col-md-3">
		<volist name="n_list" id="nvo">
		<input class="btn btn-info btn-block"  type="button" name="id" value="{$nvo.sno|substr=4}-{$nvo.username}" data-id="{$nvo.id}" />
		</volist>
	</div>
	</div>
    <form action="{:U()}" method="post" class="form-horizontal">
    <input type="hidden" value="{$classid}" name="id" id="id"></input>
        <input type="hidden" value="" name="ids" id="ids"></input>
        <input type="hidden" value="" name="not_ids" id="not_ids"></input>
        <button class="btn submit-btn ajax-post" id="submit" type="submit" target-form="form-horizontal">确 定</button>
        <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button>
    </form>
    
</block>

<block name="script">
    <script type="text/javascript">
        //导航高亮
        highlight_subnav('{:U('ClassAllot/index')}');
$.app = {
	students:function(){
		setChoosed();
		function setChoosed(){
			resizeScroll();
			var ids = [];
			var not_ids = [];
			$(".choosed-form input").each(function(){
				ids[ids.length] = $(this).data("id");
			});
			$(".not-choosed input").each(function(){
				not_ids[not_ids.length] = $(this).data("id");
			});
			$("#ids").attr("value",ids);
			$("#not_ids").attr("value",not_ids);
			$(".choosed-form input").unbind("click").bind("click",choose);
			$(".not-choosed input").unbind("click").bind("click",unchoose);
		}
		function choose(){
			$(this).prependTo(".not-choosed");
			$(this).removeClass('animated lightSpeedIn')
				   .addClass('animated fadeInLeft');
			setChoosed();
		}
		function unchoose(){
			$(this).prependTo(".choosed-form");
			$(this).removeClass('animated fadeInLeft')
			       .addClass('animated lightSpeedIn');
			setChoosed();

		}
		//重新计算滚动条
		function resizeScroll(){
			$('.choosed , .not-choosed').getNiceScroll().resize();
		}
		//此处使用niceScroll插件，好看
		$('.choosed , .not-choosed').niceScroll({
            cursorcolor: "#ccc",//#CC0071 光标颜色
            cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0
            touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备
            cursorwidth: "5px", //像素光标的宽度
            cursorborder: "0", // 	游标边框css定义
            cursorborderradius: "5px",//以像素为光标边界半径
            autohidemode: false //是否隐藏滚动条
        });

	}
}
//执行
$.app.students();
/*$('.choosed input, .not-choosed input').mouseover(function(){
	$(this).addClass('animated rubberBand');
}).mouseout(function(){
	$(this).removeClass('animated rubberBand');
})*/

</script>
</block>
